<template>
  <div
      class="process-flow-container"
      :style="{
      backgroundImage: 'url(/src/assets/images/Calculate/back1.jpg)',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      opacity: backgroundOpacity
    }"
  >
    <v-row justify="center" align="center" style="padding: 30px;">
      <v-col cols="auto" class="text-center">
        <div class="step-circle">
          <span class="step-text">1.选择设备型号</span>
        </div>
      </v-col>
      <v-col cols="auto" class="text-center">
        <div class="connector-line"></div>
      </v-col>
      <v-col cols="auto" class="text-center">
        <div class="step-circle">
          <span class="step-text">2.输入设备信息</span>
        </div>
      </v-col>
      <v-col cols="auto" class="text-center">
        <div class="connector-line"></div>
      </v-col>
      <v-col cols="auto" class="text-center">
        <div class="step-circle">
          <span class="step-text">3.点击一键评估按钮</span>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'ProcessFlow',
  data() {
    return {
      backgroundOpacity: 0.6, // Default opacity value
    };
  }
};
</script>

<style scoped>
.process-flow-container {
  position: relative; /* Needed for absolute positioning of potential overlay elements */
  width: 100%; /* Adjust as needed */
  /* height: 200px; /* Adjust as needed */
  overflow: hidden; /* To contain the background within the container */
}

.step-circle {
  width: 170px; /* Slightly larger */
  height: 150px; /* Slightly larger */
  border-radius: 50%;
  border: 2px solid #d9e2ef; /* Light grey border */
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 0 2px #e6f7ff; /* Inner shadow for depth */
  z-index: 1; /* Ensure circles are above the background */
}

.step-circle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 2px solid #add8e6; /* Light blue outer border */
  z-index: -1;
}

.step-circle::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  border: 2px solid #87ceeb; /* Slightly darker blue outer border */
  z-index: -2;
}

.step-text {
  font-size: 16px;
  color: #1976d2; /* Blue text */
  text-align: center;
  font-weight: 600;
  padding: 10px;
  line-height: 1.2;
  z-index: 1; /* Ensure text is above the background */
}

.connector-line {
  border-top: 2px dashed #d9e2ef; /* Light grey dashed line */
  width: 80px; /* Adjust width for spacing */
  height: 6px;
  z-index: 1; /* Ensure line is above the background */
}

/* Optional: Add a background color to the row if the image has transparent areas */

</style>